<template>
  <div class="III-IV-I">
    <table class="III-IV-I__table">
      <tr class="III-IV-I__table-trone">
        <td class="III-IV-I__table-trone-td"
            colspan="7">
          <div class="III-IV-I__table-trone-td-title">
            III-4科研获奖情况
          </div>
        </td>
      </tr>
      <tr class="III-IV-I__table-trtwo">
        <td class="III-IV-I__table-trtwo-td"
            colspan="8">
          <div class="III-IV-I__table-trtwo-td-title">
            （一）国家级科研奖励
          </div>
        </td>
      </tr>
      <tr class="III-IV-I__table-th">
        <td class="III-IV-I__table-th-tdone">
          序号
        </td>
        <td class="III-IV-I__table-th-tdtwo">
          奖项名称
        </td>
        <td class="III-IV-I__table-th-tdthree">
          获奖<br>等级
        </td>
        <td class="III-IV-I__table-th-tdfour">
          获奖项目名称
        </td>
        <td class="III-IV-I__table-th-tdfive">
          完成人
        </td>
        <td class="III-IV-I__table-th-tdsix">
          获奖<br>年度
        </td>
        <td class="III-IV-I__table-th-tdseven">
          参与单<br>位情况
        </td>
        <td class="III-IV-I__table-th-tdeight">
          参与学<br>科情况
        </td>
        <el-button type="success"
                   size="small"
                   icon="el-icon-plus"
                   class="III-IV-I__table-th-add-button"
                   circle
                   @click.prevent="addGuojiaList"/>
      </tr>
      <tr v-for="(item, index) in cda.countryReward"
          :key="index + 'guo'"
          class="III-IV-I__table-tr">
        <td class="III-IV-I__table-tr-tdone">
          {{ index + 1 }}
        </td>
        <td class="III-IV-I__table-tr-tdtwo">
          <el-select v-model="item.awardName"
                     class="III-IV-I__table-tr-tdtwo-select"
                     placeholder="请选择">
            <el-option v-for="item in options1"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"/>
          </el-select>
        </td>
        <td class="III-IV-I__table-tr-tdthree">
          <el-input
            v-model="item.achieveName"
            class="III-IV-I__table-tr-tdthree-input"
            type="input"
            autosize
            placeholder="一等"
            :maxlength="2"/>
        </td>
        <td class="III-IV-I__table-tr-tdfour">
          <el-input
            v-model="item.awardLevel"
            class="III-IV-I__table-tr-tdfour-input"
            type="textarea"
            autosize
            placeholder="XXXX"
            :maxlength="50"/>
        </td>
        <td class="III-IV-I__table-tr-tdfive">
          <el-input
            v-model="item.completer"
            class="III-IV-I__table-tr-tdfive-input"
            type="textarea"
            autosize
            placeholder="张三、李四"
            :maxlength="20"/>
        </td>
        <td class="III-IV-I__table-tr-tdsix">
          <el-input
            v-model="item.awardYear"
            class="III-IV-I__table-tr-tdsix-input"
            type="input"
            autosize
            placeholder="2018"
            :maxlength="4"/>
        </td>
        <td class="III-IV-I__table-tr-tdseven">
          <el-input
            v-model="item.deptInfo"
            class="III-IV-I__table-tr-tdseven-input"
            type="input"
            autosize
            placeholder="2(1)"
            :maxlength="10"/>
        </td>
        <td class="III-IV-I__table-tr-tdeight">
          <el-input
            v-model="item.scienceInfo"
            class="III-IV-I__table-tr-tdeight-input"
            type="input"
            autosize
            placeholder="1(100%)"
            :maxlength="10"/>
        </td>
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   class="III-IV-I__table-tr-delete-button"
                   circle
                   @click.prevent="deleteGuojiaItem(index)"/>
      </tr>
      <tr class="III-IV-I__table-trtwo">
        <td class="III-IV-I__table-trtwo-td"
            colspan="7">
          <div class="III-IV-I__table-trtwo-td-title">
            （二）教育部奖、军队国防奖、中国专利奖
          </div>
        </td>
      </tr>
      <tr class="III-IV-I__table-th">
        <td class="III-IV-I__table-th-tdone">
          序号
        </td>
        <td class="III-IV-I__table-th-tdtwo">
          奖项名称
        </td>
        <td class="III-IV-I__table-th-tdthree">
          获奖<br>等级
        </td>
        <td class="III-IV-I__table-th-tdfour">
          获奖项目名称
        </td>
        <td class="III-IV-I__table-th-tdfive">
          完成人
        </td>
        <td class="III-IV-I__table-th-tdsix">
          获奖<br>年度
        </td>
        <td class="III-IV-I__table-th-tdseven">
          参与单<br>位情况
        </td>
        <td class="III-IV-I__table-th-tdeight">
          参与学<br>科情况
        </td>
        <el-button type="success"
                   size="small"
                   icon="el-icon-plus"
                   class="III-IV-I__table-th-add-button"
                   circle
                   @click.prevent="addOtherList"/>
      </tr>
      <tr v-for="(item, index) in cda.eduReward"
          :key="index + 'other'"
          class="III-IV-I__table-tr">
        <td class="III-IV-I__table-tr-tdone">
          {{ index + 1 }}
        </td>
        <td class="III-IV-I__table-tr-tdtwo">
          <el-select v-model="item.awardName"
                     class="III-IV-I__table-tr-tdtwo-select"
                     placeholder="请选择">
            <el-option v-for="item in options2"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"/>
          </el-select>
        </td>
        <td class="III-IV-I__table-tr-tdthree">
          <el-input
            v-model="item.achieveName"
            class="III-IV-I__table-tr-tdthree-input"
            type="input"
            autosize
            placeholder="一等"
            :maxlength="2"/>
        </td>
        <td class="III-IV-I__table-tr-tdfour">
          <el-input
            v-model="item.awardLevel"
            class="III-IV-I__table-tr-tdfour-input"
            type="textarea"
            autosize
            placeholder="XXXX"
            :maxlength="50"/>
        </td>
        <td class="III-IV-I__table-tr-tdfive">
          <el-input
            v-model="item.completer"
            class="III-IV-I__table-tr-tdfive-input"
            type="textarea"
            autosize
            placeholder="张三"
            :maxlength="20"/>
        </td>
        <td class="III-IV-I__table-tr-tdsix">
          <el-input
            v-model="item.awardYear"
            class="III-IV-I__table-tr-tdsix-input"
            type="input"
            autosize
            placeholder="2019"
            :maxlength="4"/>
        </td>
        <td class="III-IV-I__table-tr-tdseven">
          <el-input
            v-model="item.deptInfo"
            class="III-IV-I__table-tr-tdseven-input"
            type="input"
            autosize
            placeholder="2(1)"
            :maxlength="10"/>
        </td>
        <td class="III-IV-I__table-tr-tdeight">
          <el-input
            v-model="item.scienceInfo"
            class="III-IV-I__table-tr-tdeight-input"
            type="input"
            autosize
            placeholder="1(100%)"
            :maxlength="10"/>
        </td>
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   class="III-IV-I__table-tr-delete-button"
                   circle
                   @click.prevent="deleteOtherItem(index)"/>
      </tr>
      <tr class="III-IV-I__table-trtwo">
        <td class="III-IV-I__table-trtwo-td"
            colspan="7">
          <div class="III-IV-I__table-trtwo-td-title">
            （三）其他代表性科研奖励
            <span class="III-IV-I__table-trtwo-td-title-tips">
              （限10项）
            </span>
          </div>
        </td>
      </tr>
      <tr class="III-IV-I__table-th">
        <td class="III-IV-I__table-th-tdone">
          序号
        </td>
        <td class="III-IV-I__table-th-tdtwo">
          奖项名称
        </td>
        <td class="III-IV-I__table-th-tdthree">
          获奖<br>等级
        </td>
        <td class="III-IV-I__table-th-tdfour">
          获奖项目名称
        </td>
        <td class="III-IV-I__table-th-tdfive">
          完成人
        </td>
        <td class="III-IV-I__table-th-tdsix">
          获奖<br>年度
        </td>
        <td class="III-IV-I__table-th-tdseven">
          参与单<br>位情况
        </td>
        <td class="III-IV-I__table-th-tdeight">
          参与学<br>科情况
        </td>
        <el-button type="success"
                   size="small"
                   icon="el-icon-plus"
                   class="III-IV-I__table-th-add-button"
                   circle
                   @click.prevent="addThreeList"/>
      </tr>
      <tr v-for="(item, index) in cda.otherReward"
          :key="index + 'three'"
          class="III-IV-I__table-tr">
        <td class="III-IV-I__table-tr-tdone">
          {{ index + 1 }}
        </td>
        <td class="III-IV-I__table-tr-tdtwo">
          <el-input
            v-model="item.awardName"
            class="III-IV-I__table-tr-tdtwo-input"
            type="textarea"
            autosize
            placeholder="请填写奖项名称"
            :maxlength="50"/>
        </td>
        <td class="III-IV-I__table-tr-tdthree">
          <el-input
            v-model="item.achieveName"
            class="III-IV-I__table-tr-tdthree-input"
            type="input"
            autosize
            placeholder="一等"
            :maxlength="2"/>
        </td>
        <td class="III-IV-I__table-tr-tdfour">
          <el-input
            v-model="item.awardLevel"
            class="III-IV-I__table-tr-tdfour-input"
            type="textarea"
            autosize
            placeholder="XXXX"
            :maxlength="50"/>
        </td>
        <td class="III-IV-I__table-tr-tdfive">
          <el-input
            v-model="item.completer"
            class="III-IV-I__table-tr-tdfive-input"
            type="textarea"
            autosize
            placeholder="张二、王五"
            :maxlength="20"/>
        </td>
        <td class="III-IV-I__table-tr-tdsix">
          <el-input
            v-model="item.awardYear"
            class="III-IV-I__table-tr-tdsix-input"
            type="input"
            autosize
            placeholder="2018"
            :maxlength="4"/>
        </td>
        <td class="III-IV-I__table-tr-tdseven">
          <el-input
            v-model="item.deptInfo"
            class="III-IV-I__table-tr-tdseven-input"
            type="input"
            autosize
            placeholder="3(1)"
            :maxlength="10"/>
        </td>
        <td class="III-IV-I__table-tr-tdeight">
          <el-input
            v-model="item.scienceInfo"
            class="III-IV-I__table-tr-tdeight-input"
            type="input"
            autosize
            placeholder="1(100%)"
            :maxlength="10"/>
        </td>
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   class="III-IV-I__table-tr-delete-button"
                   circle
                   @click.prevent="deleteThreeItem(index)"/>
      </tr>
    </table>
    <div class="III-IV-I__explain">
      <span class="III-IV-I__explain-strong">
        说明：①
      </span>
      表（一）限填评估期内获得的“国家最高科学技术奖、自然科学奖、技术发明奖、科技进步奖、国际科学技术合作奖”，各获奖单位均可填写，下同。
      <span class="III-IV-I__explain-strong">
        ②
      </span>
      表（二）限填“教育部高等学校科学研究优秀成果奖（科学技术）、国防科学技术奖、军队科学技术奖（科学技术）、中国专利奖（仅填写二等/银奖及以上奖项）”。
      <span class="III-IV-I__explain-strong">
        ③
      </span>
      表（三）填写10项其他代表性科研奖励（如省级“三大奖”、重要国际奖、学会协会奖、社会奖）。
      <span class="III-IV-I__explain-strong">
        ④
      </span>
      “获奖年度”应与获奖证书名称或内容的年度表述一致，若无明确的年度表述以证书编号中的年度信息为准，其他以证书落款年度为准。
    </div>
  </div>
</template>

<script>
import { getPageData } from '@/utils/getData.js'

export default {
  watch: {
    cda: {
      handler (newVal) {
        sessionStorage['this_data'] = JSON.stringify(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  async mounted () {
    const loading = this.$loading({ lock: true, text: '数据获取中...请稍后！', background: 'rgba(0, 0, 0, 0.7)' })
    this.cda = await getPageData('cda')
    loading.close()
  },
  data () {
    return {
      options1: [
        { value: '0', label: '国家最高科学技术奖' },
        { value: '1', label: '自然科学奖' },
        { value: '2', label: '技术发明奖' },
        { value: '3', label: '科技进步奖' },
        { value: '4', label: '国际科学技术合作奖' }],
      options2: [
        { value: '0', label: '教育部高等学校科学研究优秀成果奖' },
        { value: '1', label: '国防科学技术奖' },
        { value: '2', label: '军队科学技术奖' },
        { value: '3', label: '中国专利奖' }],
      cda: {
        countryReward: [{ awardName: '', achieveName: '', awardLevel: '', completer: '', awardYear: '', deptInfo: '', scienceInfo: '' }],
        eduReward: [{ awardName: '', achieveName: '', awardLevel: '', completer: '', awardYear: '', deptInfo: '', scienceInfo: '' }],
        otherReward: [{ awardName: '', achieveName: '', awardLevel: '', completer: '', awardYear: '', deptInfo: '', scienceInfo: '' }]
      }
    }
  },
  methods: {
    addGuojiaList () {
      this.cda.countryReward.push({ awardName: '', achieveName: '', awardLevel: '', completer: '', awardYear: '', deptInfo: '', scienceInfo: '' })
    },
    deleteGuojiaItem (index) {
      if (this.cda.countryReward.length > 1) {
        this.cda.countryReward.splice(index, 1)
      }
    },
    addOtherList () {
      this.cda.eduReward.push({ awardName: '', achieveName: '', awardLevel: '', completer: '', awardYear: '', deptInfo: '', scienceInfo: '' })
    },
    deleteOtherItem (index) {
      if (this.cda.eduReward.length > 1) {
        this.cda.eduReward.splice(index, 1)
      }
    },
    addThreeList () {
      if (this.cda.otherReward.length < 10) {
        this.cda.otherReward.push({ awardName: '', achieveName: '', awardLevel: '', completer: '', awardYear: '', deptInfo: '', scienceInfo: '' })
      }
    },
    deleteThreeItem (index) {
      if (this.cda.otherReward.length > 1) {
        this.cda.otherReward.splice(index, 1)
      }
    }
  }
}
</script>

// <style lang="less" scoped>
 @import '../../assets/css/page/3-4-1.less';
 </style>
